import React, { useEffect, useState } from 'react'
import {
  PageHeader, Button, Modal, Form, Input, message,
  Row,
  Col,
  Card,
  Collapse,
  Tag,
  Tabs
} from 'antd';
import { UserOutlined, CaretRightOutlined } from '@ant-design/icons';
import PatientHeadDetails from "../components/PatientHeadDetails"
const { Panel } = Collapse;

const text = `
  A dog is a type of domesticated animal.
  Known for its loyalty and faithfulness,
  it can be found as a welcome guest in many households across the world.
`;

const { TextArea } = Input;

export default function Inspect() {

  const [form] = Form.useForm();

  const onFinish = () => {
    message.success('Submit success!');
  };

  const onFinishFailed = () => {
    message.error('Submit failed!');
  };


  return (
    <div className='Patient-information inspect'>
      <PatientHeadDetails />
      <div className='inspect-content-box' >

        <div className='inspect-content1'>
          <div className="card-box">
            {
              [1, 2, 3, 4,].map((item) => (
                <Card size="small" title="2021/11/22(月)"
                  extra={<a href="#">x</a>}
                  className={"Card"}
                >
                  <div>{"内科"}</div>
                  <Tag> {"完了"}</Tag>

                </Card>
              ))
            }

          </div>
          <div className='collapse-box' >
            <Collapse
              bordered={false}
              defaultActiveKey={['1']}
              expandIcon={({ isActive }) => <CaretRightOutlined rotate={isActive ? 90 : 0} />}
              className="site-collapse-custom-collapse"
            >
              <Panel
                header={
                  <div >
                    {"2021/11/22(月) "}

                    <Tag>内科</Tag>
                  </div>}
                key="1" className="site-collapse-custom-panel">
                <p>{text}</p>
              </Panel>
              <Panel header={
                <div >
                  2021/11/22(月)
                  <Tag>内科</Tag>
                </div>} key="2" className="site-collapse-custom-panel">
                <p>{text}</p>
              </Panel>
              <Panel header={
                <div >
                  2021/11/22(月)
                  <Tag>内科</Tag>
                </div>} key="3" className="site-collapse-custom-panel">
                <p>{text}</p>
              </Panel>
            </Collapse>
          </div>




        </div>

        <div className='information-content2'>
          <div>
            <span>
              {"2021/12/1(水) "}
            </span>
            <Tag>内科 </Tag>
            <span  className='information-content2-btn'>
              <Button>观察取消</Button>
              <Button>确认</Button>
            </span>

          </div>
          <div className='observe-details'>
            <div className='observe-details-TextArea'>
              <TextArea rows={4} placeholder='診療記録 coming soon...' />
            </div>
            <div className='observe-details-prescription'>
              <h3>处方·配送</h3>
              <p>
                <span>処方種別</span>
                <Tag.CheckableTag>院内</Tag.CheckableTag>
                <Tag.CheckableTag>院外</Tag.CheckableTag>
                <Tag.CheckableTag>なし</Tag.CheckableTag>
              </p>
              <p>
                <span>配送方法</span>
                <Tag.CheckableTag>CBクラクド</Tag.CheckableTag>
                <Tag.CheckableTag>ャマト</Tag.CheckableTag>
                <Tag.CheckableTag>邮送 なし</Tag.CheckableTag>
              </p>
              <div className='observe-details-prescription-foot'>
                <h3>お届け先情報</h3>
                <p className='intelligence-details'>
                  7105-0014
                  東京都港区芝1丁目12-13ルボマンション1003佐藤 健一様
                  TEL 090-1234-5678
                </p>
              </div>
              <Button className='intelligence-details-btn'>观察取消</Button>
            </div>

          </div>


        </div>

      </div>

    </div>
  )
}
